<template>
	<view class="page flex-col center">
		<view class="box_1 flex-row">
			<view class="box_2 flex-col">
				<view class="list_1 flex-row">
					<view class="list-items_1 flex-row justify-between" v-for="(item, index) in deviceInfomate"
						:key="index"
						:class="['select', selectedCardInfo.some(card => card.id === item.id) ? 'select-border' : '']"
						@click="selectCard(item.id)">
						<view class="card-item">
							<text class="text_3" :style="{ color: item.lanhufontColor0 }">
								￥{{ selectedCard.includes(item.id) ? '已选中' : item.robotPrice + '元' }}</text>
							<text class="name">{{item.robotName}}</text>
						</view>
					</view>
				</view>
				<view class="group_3 flex-row">
					<text class="text_6">设备数量</text>
					<!-- 减少数量 -->
					<image 
					class="thumbnail_2"
					referrerpolicy="no-referrer"
					@click="jianDeviceNumber()"
					src="../../../static/order-images/btn_buy_reduce@2x.png" />
					<text class="text_7">{{devieceNumber}}</text>
					<!-- 增加数量 -->
					<image 
					class="thumbnail_3"
					referrerpolicy="no-referrer"
					@click="increaseDeviceNumber()"
					src="../../../static/order-images/btn_buy_add@2x.png" />
				</view>
				<view class='device-num'
					style="padding: 5px 10px; border: 1px solid #000; display: flex; justify-content: space-between; align-content: center; margin: 10px 0; border-radius: 5px;">
					<view>账号</view>
					<input v-model="account" style="text-align: right;font-size: 26rpx;" type="text"
						placeholder="请输入下单账号">
				</view>
				<view class='device-num' style="margin-top: 15px; ">
					<view>交易凭证：</view>
					<view class="" >
						  <view class="file-picker-wrapper">
						    <uni-file-picker 
						      ref="filePicker" 
						      :auto-upload="false" 
						      @select="select" 
						      class="custom-file-picker"
							  style="position: relative; top: -15px;left: 230px;"
						    ></uni-file-picker>
						  </view>
					<!-- 	<button @click="upload" style="background-color: rgba(41, 167, 244, 1);color: aliceblue; margin: 10px 0;width: 100px; height: 40px;margin-right: -80px;position: absolute;left: 245px;top: 10px;">上传文件</button> -->
						<!-- 上传成功的提示框 -->
					</view>
				</view>
				<view class="text-wrapper_1 flex-row justify-between" @click="submit()">
					<text class="text_8">立即充值</text>
					<text class="text_9" >￥{{TotelPrice}}</text>
				</view>
				  <div v-if="successMessage" class="success-message">
				      {{ successMessage }}
					</div>
			</view>
		</view>
	</view>
</template>

<script>
	import {login} from '../../../api/login.js'
	import {getToken} from '../../../utils/auth.js'
	import {robotList,addOrder,userID,uploadPictrue} from '../../../api/system/user.js'
	export default {
		data() {
			return {
				devieceNumber: 1, //购买的设备个数
				deviceTotelPrice: null, //充值的总金额
				selectedCard: [], //当前选中的设备为空
				selectPrice: 0,
				deviceInfomate: [],
				selectedCardInfo: [], //存储当前选中的设备
				tempFiles: [],
				quantity: '',
				imageUrl: '', // 用于保存上传成功后的图片路径
				filePath: '',
				selectedFile: null,
				proof:''
			}
		},
		onload() {
			this.deviceInformation()
		},
		mounted() {
			this.deviceInformation(),
			this.upload()
		},
		methods: {
			async myUser() {
				const userId = await userID()
				console.log('获取信息成功', userId);
				return userId
			},
			// 设备信息
			deviceInformation() {
				robotList().then(res => {
					console.log('设备信息请求成功', res);
					this.deviceInfomate = res
				}).catch(error => {
					console.error('设备信息请求失败', error);
				});
			},
			// 增加设备数量
			increaseDeviceNumber() {
				this.devieceNumber++
			},
			// 减少设备数量
			jianDeviceNumber() {
				if(this.devieceNumber === 0){
					return 
				}else{
					this.devieceNumber--
				}
			},
			selectCard(cardId) {
				// 清空先前选中的选项和数量
				this.selectedCardInfo = [];
				this.quantity = 1;
				// 查找当前选中的选项
				const selectedCard = this.deviceInfomate.find(item => item.id === cardId);

				// 如果找到了选中的选项
				if (selectedCard) {
					// 将当前选项设为选中
					this.selectedCardInfo.push(selectedCard);
				}
			},
			// 根据判断所选择得的设备不同从而对金额进行统计
			async submit() {
				 // if (!this.uploaded) {
				 //        await this.upload();
				 //        this.uploaded = true; // 标记为已上传
				 //    }
				const userId = await this.myUser(); // 使用 await 等待 myUser() 返回的结果
				// 将获取到的结构
				for (const selectedCard of this.selectedCardInfo) {
					const {
						robotName,
						robotPrice
					} = selectedCard;

					// 根据需要处理选中设备的其他参数
					console.log("设备名称:", robotName);
					console.log("设备价格:", robotPrice);
					// 获取当前时间戳
					const timeStamp = new Date().getTime()
					console.log('mmmmmm', data);
					const data = new Date(timeStamp)
					const year = data.getFullYear();
					const month = data.getMonth() + 1;
					const date = data.getDate();
					const hours = data.getHours();
					const minute = data.getMinutes();
					const formattedDate = `${year}-${month}-${date} ${hours}:${minute}`
					console.log('xxxx', formattedDate);
					//计算出总价格
					const totalPrice = robotPrice * this.devieceNumber;
					// 输出其他选中设备的参数
					this.selectPrice = this.deviceTotelPrice
					// this.imageUrl = this.proof
					const params = {
						orderName: robotName,
						orderNumber: this.devieceNumber,
						orderPrice: totalPrice,
						orderState: '0',
						orderTime: formattedDate,
						userId: userId,
						account: this.account,
						proof: this.proof,
					}
					console.log('kkkkk',params.proof);
					console.log(this.account + "测试");
					addOrder(
						params.orderName,
						params.orderNumber,
						params.orderPrice,
						params.orderState,
						params.orderTime,
						params.userId,
						params.proof,
						params.account).then(res => {
						// console.log('请求成功', res)
						console.log(params.proof + "测试" + params.account);
						uni.showToast({
							icon: 'success',
							mask: true,
							title: '购买成功',
						});
					})
				}
			},
			// select(e) {
			// 	console.log('选择文件：', e)
			// 	this.selectedFile = e.tempFiles[0];
			// },
			// upload() {
			// 	const token = getToken()
			// 	uni.uploadFile({
			// 		url: 'http://43.138.186.106:8080/common/upload',
			// 		header: {
			// 			'Authorization': 'Bearer ' + token, // 替换 yourToken 为实际的 token 值
			// 		},
			// 		filePath: this.selectedFile.path, // 将 filePath 修改为选中文件对象的文件路径属性
			// 		name: 'file',
			// 		success: (res) => {
			// 			console.log('上传文件成功', res.data);
			// 			this.imageUrl = res.data.imageUrl;
			// 			 const responseData = JSON.parse(res.data); // 解析字符串为对象
			// 			 this.imageUrl = responseData.imageUrl;
			// 			   this.proof = responseData.url; // 将 url 赋值给 proof 属
			// 			 console.log('proof:', this.proof);
			// 		},
			// 		fail: (err) => {
			// 			console.log('上传文件失败', err);
			// 			uni.showToast({
			// 				icon: 'none',
			// 				mask: true,
			// 				title: '上传失败',
			// 				position:'center'
			// 			});
			// 		}
			// 	});
			// }
			  select(e) {
			    console.log('选择文件：', e)
			    const token = getToken()
			    uni.uploadFile({
			      url: 'http://43.138.186.106:8080/common/upload',
			      header: {
			        'Authorization': 'Bearer ' + token, // 替换 yourToken 为实际的 token 值
			      },
			      filePath: e.tempFiles[0].path, // 选中文件对象的文件路径属性
			      name: 'file',
			      success: (res) => {
			        console.log('上传文件成功', res.data);
			        this.imageUrl = res.data.imageUrl;
			        const responseData = JSON.parse(res.data); // 解析字符串为对象
			        this.proof = responseData.url; // 将 url 赋值给 proof 属性
			        console.log('proof:', this.proof);
			      },
			      fail: (err) => {
			        console.log('上传文件失败', err);
			        uni.showToast({
			          icon: 'none',
			          mask: true,
			          title: '上传失败',
			          position:'center'
			        });
			      }
			    });
			  }
		},
		computed: {
			TotelPrice() {
				let totalPrice = 0
				for (const selectedCard of this.selectedCardInfo) {
					const {
						robotName,
						robotPrice
					} = selectedCard;
					// 根据需要处理选中设备的其他参数
					totalPrice += robotPrice * this.devieceNumber;
					console.log("设备名称:", robotName);
					console.log("设备价格:", robotPrice);
					// 输出其他选中设备的参数
				}
				return totalPrice
			}
		}
	}
</script>
<style>
	@import url("../../common/common.css");
	
	::v-deep .file-picker__box-content{
		border: 1px solid #000;
		
	}
	/* ::v-deep .file-picker__box{
		border: 1px solid #000;
	} */
	::v-deep .file-picker__box{
		/* border: 1px solid #000; */
	}
	::v-deep .icon-add{
		border: 1px solid rgba(41, 167, 244, 1);
		background-color: rgba(41, 167, 244, 0.5);
	}
</style>
<style lang="scss">
	
	.file-picker__box {
		width: 200px;
		height: 200px;
	}

	// .upload-icon {
	// 	width: 200px;
	// 	/* 设置图标的初始宽度 */
	// 	height: 200px;
	// 	/* 设置图标的初始高度 */
	// 	transform: scale(1.5);
	// 	/* 使用 transform 缩放图标，比例为 1.5 */
	// }

	// 选中卡片的边框
	.select-border {
		background-color: rgba(0, 0, 255, 0.03);
		;
	}
	.page {
		background-color: rgba(246, 247, 251, 1);
		position: relative;
		width: 100vw;
		overflow: hidden;
		margin: 0 auto;
		.box_1 {
			height: 100vh;
			.box_2 {
				margin: 0 auto;
				.group_1 {
					.text_1 {
						overflow-wrap: break-word;
						color: rgba(0, 0, 0, 1);
						font-size: 15px;
						letter-spacing: -0.3333333432674408px;
						font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
						font-weight: NaN;
						text-align: center;
						white-space: nowrap;
						line-height: 18px;
					}

					.image_1 {
						width: 67px;
						height: 11px;
						margin: 3px 0 4px 0;
					}
				}

				.group_2 {
					width: 204px;
					margin: 23px 141px 0 0;

					.thumbnail_1 {
						width: 17px;
						height: 17px;
						margin: 3px 0 2px 0;
					}

					.text_2 {
						overflow-wrap: break-word;
						color: rgba(34, 34, 34, 1);
						font-size: 16px;
						font-weight: NaN;
						text-align: center;
						white-space: nowrap;
						line-height: 22px;
					}
				}

				.list_1 {
					width: 335px;
					height: 125px;
					justify-content: space-evenly;
					margin: 31px 6px 0 4px;

					.list-items_1 {
						border-radius: 8px;
						width: 105px;
						border: 2px solid rgba(41, 167, 244, 1);
						margin-right: 10px;
						padding: 33px 17px 33px 17px;

						.card-item {
							display: flex;
							flex-direction: column;

							.name {
								text-align: center;
								margin-left: 9px;
								font-size: 10px;
							}

							.text_3 {
								// width: 14px;
								overflow-wrap: break-word;
								font-size: 13px;
								font-family: PingFangSC-Semibold;
								font-weight: 800;
								// text-align: center;
								white-space: nowrap;
								line-height: 18px;
								margin-top: 9px;
							}
						}

						.text-group_1 {
							.text_4 {
								width: 66px;
								overflow-wrap: break-word;
								font-size: 22px;
								font-family: PingFangSC-Semibold;
								font-weight: 600;
								text-align: left;
								white-space: nowrap;
								line-height: 30px;
							}

							.text_5 {
								width: 43px;
								overflow-wrap: break-word;
								font-size: 14px;
								font-weight: NaN;
								text-align: center;
								white-space: nowrap;
								line-height: 20px;
								margin: 5px 17px 0 2px;
							}
						}
					}
				}

				.group_3 {
					margin: 27px 6px 0 4px;

					.text_6 {
						overflow-wrap: break-word;
						color: rgba(34, 34, 34, 1);
						font-size: 16px;
						font-weight: NaN;
						text-align: left;
						white-space: nowrap;
						line-height: 22px;
						margin-top: 3px;
					}

					.thumbnail_2 {
						width: 16px;
						height: 16px;
						margin: 6px 0 6px 205px;
					}

					.text_7 {
						overflow-wrap: break-word;
						color: rgba(34, 34, 34, 1);
						font-size: 20px;
						font-weight: NaN;
						text-align: center;
						white-space: nowrap;
						line-height: 28px;
						margin-left: 12px;
					}

					.thumbnail_3 {
						width: 16px;
						height: 16px;
						margin: 6px 0 6px 12px;
					}
				}

				.text-wrapper_1 {
					background-color: rgba(41, 167, 244, 1);
					border-radius: 23px;
					width: 335px;
					margin: 37px 6px 0 4px;
					padding: 12px 102px 12px 103px;

					.text_8 {
						overflow-wrap: break-word;
						color: rgba(255, 255, 255, 1);
						font-size: 16px;
						font-weight: NaN;
						text-align: center;
						white-space: nowrap;
						line-height: 22px;
					}

					.text_9 {
						overflow-wrap: break-word;
						color: rgba(255, 255, 255, 1);
						font-size: 16px;
						font-family: PingFangSC-Semibold;
						font-weight: 600;
						text-align: center;
						white-space: nowrap;
						line-height: 22px;
					}
				}
			}

		}
	}
</style>